<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="layouts/layout">
<head>
</head>
<body>
<div layout:fragment="content">
    <div class="panel panel-flat">
        <div class="panel-body">
            <form class="form-horizontal" action="#" id="edit-course-form" enctype="multipart/form-data">
                <fieldset class="content-group">
                    <input type="hidden" th:value="${course.id}" name="courseId"/>

                    <div class="form-group">
                        <label class="control-label col-lg-2">课程名称：</label>
                        <div class="col-lg-5">
                            <input type="text" th:value="${course.courseName}" class="form-control" name="courseName" placeholder="请输入课程名称"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-lg-2">课程分类：</label>
                        <div class="col-lg-5">
                            <select class="select" name="courseType">
                                <option th:each="courseType : ${T(cn.xing.managementSystem.enums.CourseType).values()}" th:value="${courseType}" th:selected="${courseType == course.CourseType}" th:text="${courseType.name}"></option>

                                <!--<option value="0">会计专硕MPACC</option>
                                <option value="1">金融专硕</option>
                                <option value="2">经济学联考</option>-->
                            </select>
                        </div>
                    </div>
                    <div class="form-group" id="coverImageDiv">
                        <label class="control-label col-lg-2">课程图标：</label>
                        <div class="col-lg-5">
                            <a class="img_icon" href="javascript:;"
                               onclick="showImageSelector(this);" aspect-ratio="1"
                               data-save-func="saveTemplateImage" attr-name="edit_feed_smallImg">
                                <img th:if="${course.imageStore != null}" th:src="@{/showImage(id=${course.imageStore.id})}" alt="" style="max-width: 200px; max-height: 200px;"/>
                                <img th:if="${course.imageStore == null}" th:src="@{/images/upload-select-bg.jpg}" alt="" style="max-width: 200px; max-height: 200px;"/>
                            </a>
                            <input type="file" onchange="changeImageUrl(this);" name="courseImageFile"
                                   style="left:-9999px;position:absolute;"/>

                            <input type="hidden" th:if="${course.imageStore != null}" th:value="${course.imageStore.id}" name="courseImageId"/>

                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-lg-2">课程简介：</label>
                        <div class="col-lg-10">
                            <textarea rows="5" cols="5" class="form-control" th:text="${course.courseIntroduction}" name="courseIntroduction"
                                      placeholder="请输入课程简介"></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-lg-2">课程详情：</label>
                        <div class="col-lg-10">
                            <div id="courseEditor" th:utext="${course.courseDetail}">
                            </div>
                        </div>
                    </div>
                </fieldset>
                <div class="text-right">
                    <button type="submit" class="btn btn-primary">提交<i class="icon-arrow-right14 position-right"></i></button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- /page content -->
</body>
</html>
<script type="text/javascript" th:src="@{assets/js/plugins/forms/selects/select2.min.js}"></script>
<script type="text/javascript" th:src="@{/javascripts/wangEditor-3.1.1/release/wangEditor.min.js}"></script>
<script type="text/javascript">

    $(function () {
        var E = window.wangEditor
        var editor = new E('#courseEditor')
        // 或者 var editor = new E( document.getElementById('editor') )
        editor.customConfig.colors = [
            '#000000',
            '#eeece0',
            '#1c487f',
            '#4d80bf',
            '#c24f4a',
            "#ff0000",
            '#8baa4a',
            '#7b5ba1',
            '#46acc8',
            '#f9963b',
            '#ffffff',
            "#acacac"
        ]
        editor.customConfig.uploadImgServer = '/management_system/upload'
        editor.customConfig.uploadFileName = 'file'
        editor.customConfig.debug = true

        editor.customConfig.showLinkImg = false
        editor.create();

        jQuery.validator.addMethod("checkImageFile", function (value, element) {
            var courseImageId = $("input[name=courseImageId]").val();
            /*<![CDATA[*/
            if((courseImageId && courseImageId != '') || value){
                return true;
            }
            /*]]>*/
            return false;
        }, "封面不能为空");

        $("#edit-course-form").validate({
            ignore: 'input[type=hidden]',
            errorClass: 'validation-error-label',
            successClass: 'validation-valid-label',
            highlight: function (element, errorClass) {
                $(element).removeClass(errorClass);
            },
            unhighlight: function (element, errorClass) {
                $(element).removeClass(errorClass);
            },
            // Different components require proper error label placement
            errorPlacement: function (error, element) {
                // Styled checkboxes, radios, bootstrap switch
                if (element.attr("type") == "checkbox") {
                    error.appendTo(element.parent().parent().parent().parent().parent().parent().parent());
                } else if (element.parents('div').hasClass("checker") || element.parents('div').hasClass("choice") || element.parent().hasClass('bootstrap-switch-container')) {
                    if (element.parents('label').hasClass('checkbox-inline') || element.parents('label').hasClass('radio-inline')) {
                        error.appendTo(element.parent().parent().parent().parent());
                    }
                    else {
                        error.appendTo(element.parent().parent().parent().parent().parent());
                    }
                }

                // Unstyled checkboxes, radios
                else if (element.parents('div').hasClass('checkbox') || element.parents('div').hasClass('radio')) {
                    error.appendTo(element.parent().parent().parent());
                }

                // Input with icons and Select2
                else if (element.parents('div').hasClass('has-feedback') || element.hasClass('select2-hidden-accessible')) {
                    error.appendTo(element.parent());
                }

                // Inline checkboxes, radios
                else if (element.parents('label').hasClass('checkbox-inline') || element.parents('label').hasClass('radio-inline')) {
                    error.appendTo(element.parent().parent());
                }

                // Input group, styled file input
                else if (element.parent().hasClass('uploader') || element.parents().hasClass('input-group')) {
                    error.appendTo(element.parent().parent());
                }
                else {
                    //console.log(error);
                    //console.log(element);
                    error.insertAfter(element);
                }
            },
            validClass: "validation-valid-label",
            success: function (label) {
                label.remove();
            },
            rules: {
                courseName: {
                    required: true
                },
                courseImage: {
                    checkImageFile: true
                },
                courseIntroduction: {
                    required: true
                }
            },
            messages: {
                courseName: {
                    required: "课程名称不能为空"
                },
                courseIntroduction: {
                    required: "课程简介不能为空"
                }

            },
            submitHandler: function (form) {
                var formData = new FormData($("#edit-course-form")[0]);
                var courseDetail = editor.txt.html();
                formData.append("courseDetail", courseDetail);
                $.ajax({
                    url: '/management_system/saveCourse',
                    type: 'POST',
                    data: formData,
                    dataType: 'JSON',
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function (data) {
                        if(data.code == 0){
                            showSuccessMessage("保存成功！");
                            setTimeout("redirectCourseList()", 2000);
                        }else{
                            showErrorMessage("保存出错！");
                        }

                    },
                    error: function (error) {
                        console.log(error);
                        //   showErrorMessage("保存出错！");
                    }
                });

            }
        });


        $('.select').select2({
            minimumResultsForSearch: Infinity
        });

    });


    function showImageSelector() {

        $("input[name=courseImageFile]").trigger("click");

    }

    function changeImageUrl(obj) {
        if ($(obj).val() != "") {
            $("input[name=courseImageId]").val("");
            var url = window.URL.createObjectURL(obj.files[0])
            $("#coverImageDiv").find("img").attr("src", url)
        }
    }
    
    function redirectCourseList() {
        window.location.href="/management_system/courseList?menu=课程列表";
    }



</script>